import { useEffect } from "react";
import { useModel, Outlet, history, useOutletContext } from "umi";
import { useReactive } from "ahooks";
import { IconPlusCircle, IconRefresh, IconDelete, IconEdit, IconHelpCircle } from "@douyinfe/semi-icons";
import { Card as SemiCard, Button, ButtonGroup, TabPane, Tabs, List } from "@douyinfe/semi-ui";
import { Table, Space, message, Divider, Popconfirm, Image as AntdImage, Card, Row, Col, Carousel, Alert, Avatar, Tooltip, InputNumber } from "antd";
import { v4 as uuidv4 } from "uuid";

import useHelperHomepage from "../../helper/useHelperHomepage";

const { Meta } = Card;

const HomePageRecommendCommodity = () => {
    const { selectItem, cardBodyHeight } = useOutletContext();
    const { openAddHomepageCommodityModal } = useHelperHomepage();
    const { setModalVisible, setModalTitle, setModalWidth, setModalComponent, setModalStyle } = useModel("global.modal");
    const { defaultImageBase64 } = useModel("global");

    const deleteCommodity = async (record) => {};

    const cardExtra = (
        <ButtonGroup>
            <Button icon={<IconPlusCircle />} onClick={openAddHomepageCommodityModal}>
                添加推荐商品
            </Button>
            <Button icon={<IconRefresh />}>刷新</Button>
        </ButtonGroup>
    );

    const renderOrderTitle = (
        <Space>
            <div>显示顺序</div>
            <Tooltip title={"点击更改显示顺序，根据数字从小到大显示"}>
                <IconHelpCircle style={{ paddingTop: 6 }} />
            </Tooltip>
        </Space>
    );

    const renderOrder = (_, r, i) => <InputNumber min={1} value={1} />;

    const renderOperate = (_, r, i) => (
        <Space size={0}>
            <Popconfirm title="确认要删除该推荐商品吗？" okButtonProps={{ loading: false }} onConfirm={() => deleteCommodity(r)}>
                <Button icon={<IconDelete style={{ color: "#E91E63" }} />}></Button>
            </Popconfirm>
        </Space>
    );

    return (
        <Card title="推荐商品" bordered={false} bodyStyle={{ padding: 0 }} extra={cardExtra}>
            <Table bordered={false} dataSource={[1]} rowKey="ciUuid" pagination={false} scroll={{ y: cardBodyHeight - 56 - 62 }}>
                <Table.Column title="顺序" align="center" width={60} render={(_, r, i) => i + 1} />
                <Table.Column title="商品全称" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="商品单位" dataIndex="ciName" key="ciName" align="left" />
                <Table.Column title="商品原价" dataIndex="ciName" key="ciName" align="left" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title="商品会员价" dataIndex="ciName" key="ciName" align="left" render={(_, r) => (r.info?.ciMava ? numberFormat(r.info?.ciMava, 2) : 0)} />
                <Table.Column title={renderOrderTitle} dataIndex="ciMava" align="center" width={140} render={renderOrder} />
                <Table.Column title="发布状态" dataIndex="ciName" width={100} align="center" />
                <Table.Column title="操作" width={90} align="center" render={renderOperate} />
            </Table>
        </Card>
    );
};

export default HomePageRecommendCommodity;
